<template>
  <div class="charts" ref="charts"></div>
</template>

<script>
import* as  echarts from 'echarts'
import {mapState} from "vuex";

export default {
  name: "ProgressCharts",
  data(){
    return{
      progressCharts:null
    }
  },
  mounted() {
    this.progressCharts = echarts.init(this.$refs.charts)
    //配置options
    let option = {
      xAxis:{
        show:false,
      },
      tooltip: {},
      yAxis:{
        show:false,
        type: 'category'
      },
      series:{
        type:'bar',
        color:'orange',
        barWidth:10,
        showBackground:true,
        label:{
          show:true ,
          formatter:'|',
          position:'right'
        },
        backgroundStyle: {
          color: "#eee",
        },
      },
      //布局调试
      grid:{
        left:0,
        top:0,
        right:0,
        bottom:0
      }
    }
    this.progressCharts.setOption(option)
  },
  computed:{
    ...mapState({
      activityRate:state => state.home.SaleData
    })
  },
  watch: {
    activityRate() {
      this.progressCharts.setOption({
        series:{
          data:[this.activityRate.activityRate]
        }
      })
    }
  }
}
</script>

<style scoped>
.charts{
  width: 100%;
  height: 100%;

}
</style>
